<!--
 * @Author: 曹捷
 * @Date: 2019-08-21 15:16:37
 * @LastEditors: 曹捷
 * @LastEditTime: 2021-08-28 10:05:06
 * @Description: file content
 -->
<template>
  <span>
    <ul class="obit-video-content" v-if="isShowVideo">
      <li :key="'videosArr'+inx" v-for="(item,inx) in videosArr">
        <video controls="controls" v-bind:src="item.url"></video>
        <el-button @click="removeVideo(inx)" circle icon="el-icon-close" size="mini" type="danger"></el-button>
      </li>
    </ul>
    <ul v-if="uploadType ==='img'" class="obit-video-content upload-img">
      <li :key="'videosArr'+inx" v-for="(item,inx) in videosArr">
        <el-image class="showImg" :src="item.url" fit="fill"></el-image>
        <el-button @click="removeVideo(inx)" circle icon="el-icon-close" size="mini" type="danger"></el-button>
      </li>
    </ul>
    <el-upload :accept="accept" :action="action" :auto-upload="autoUpload" :before-remove="handleRemove"
      :before-upload="beforeUpload" :class="{'obit-video':isShowVideo,'file-remove':!removeFile}" :drag="drag"
      :file-list="fileList" :http-request="customUpload" :list-type="listType" :multiple="multiple"
      :on-change="onChange" :on-exceed="onExceed" :on-preview="handlePictureCardPreview" :show-file-list="showFileList"
      class="avatar-uploader " ref="upload">
      <slot></slot>
    </el-upload>
    <el-dialog :visible.sync="dialogVisible" append-to-body v-if="listType !==''">
      <img :src="dialogImageUrl" alt width="100%" />
    </el-dialog>
  </span>
</template>

<script>
import { Upload, Loading } from 'element-ui'
import util from './../../utils/utils.js'

export default {
  components: {
    ElUpload: Upload,
  },
  props: {
    value: {
      type: [Object, String]
    },
    //   是否允许拖拽上传
    drag: {
      type: Boolean,
      default: false,
    },
    // 上传文件地址 必填
    action: {
      type: String,
      required: true,
    },
    // 上传的文件类型限制 比如  jpg,png
    accept: {
      type: String,
      default: 'jpg,png'
    },
    // 成功回调
    success: {
      type: Function,
    },
    // 是否允许多文件上传
    multiple: {
      type: Boolean,
      default: true,
    },
    size: {
      type: Number,
      default: 10,
    },
    limit: {
      type: Number,
      default: 10,
    },
    // 自定义参数
    params: {
      type: Object,
    },
    autoUpload: {
      type: Boolean,
      default: true,
    },
    showFileList: {
      type: Boolean,
      default: false,
    },
    listType: {
      type: String,
      default: '',
    },
    uploadType: {
      type: String,
      default: 'img',
    },
    fileList: {
      type: Array,
      default () {
        return []
      },
    },
    removeFile: {
      type: Boolean,
      default: false,
    }
  },
  computed: {
    isShowVideo () {
      return this.uploadType === 'video' && !this.showFileList
    },
  },
  data () {
    return {
      uploadNum: 0,
      uploadSuccessNum: 0,
      loading: '',
      dialogVisible: false,
      dialogImageUrl: '',
      videosArr: JSON.parse(JSON.stringify(this.fileList)),

    }
  },
  methods: {
    // 手动上传提交
    submit () {
      this.$refs.upload.submit()
    },
    handlePictureCardPreview (file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    removeVideo (fileIndex) {
      this.videosArr.splice(fileIndex, 1)
      //要清空uploadFiles，不然onExceed方法无法控制
      this.$refs.upload.uploadFiles.splice(fileIndex, 1)
      this.$emit('remove', fileIndex, this.params)
      this.$emit('change', this.videosArr)
    },
    handleRemove (file, fileList) {
      let fileIndex
      fileList.forEach((element, index) => {
        if (file.name === element.name) {
          fileIndex = index
        }
      })
      this.$emit('remove', fileIndex, this.params)
      this.$emit('input', '')
    },
    onExceed () {
      this.$message.error(`上传数量一次不能超过${this.limit}个`)
    },
    beforeUpload (file) {
      if (this.videosArr.length >= this.limit) {
        this.$message.error(`上传数量不能超过${this.limit}个`)
        return false
      }
      var fileType = file.name
        .substring(file.name.lastIndexOf('.') + 1)
        .toLowerCase()
      if (this.size) {
        if (file.size / 1024 / 1024 > this.size) {
          this.$message.error(`上传的文件大小不能超过${this.size}M`)
          return false
        }
      }
      if (this.accept) {
        if (this.accept.indexOf(fileType) === -1) {
          this.$message.error(`上传类型只支持${this.accept}的类型`)
          return false
        }
      }
      return true
    },
    customUpload (fileobj) {
      let param = new FormData()
      param.append('file', fileobj.file)
      //上传压缩裁剪
      let defult = Object.assign({}, this.params)
      for (var i in defult) {
        param.append(i, defult[i])
      }
      this.uploadNum++
      this.loading = Loading.service({
        lock: true,
        text: '文件上传中，请稍后',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)',
      })
      this.$http.upload(this.action, param).then((res) => {
        console.log('🚀 ~ file: obit-upload.vue ~ line 185 ~ this.$http.upload ~ res', res)
        this.endLoading()
        if (this.success) {
          let path = this.success(res, this.params)
          this.videosArr.push({ url: path })
        } else {
          this.videosArr.push({ url: res.sourceUrl })
        }
        this.$emit('change', this.videosArr)
      }).catch(() => {
        this.endLoading()
      })
    },
    endLoading () {
      this.loading.close()
      // this.uploadSuccessNum++
      // if (this.uploadNum === this.uploadSuccessNum) {
      //   // this.$refs.upload.clearFiles()
      //   this.loading.close()
      // }
    },
    onRemove (file, fileList) {
      this.$emit('onRemove', file, fileList)
    },
    onChange (fileobj) {
      if (!this.autoUpload) {
        this.$emit('input', fileobj.name)
        console.log('TCL: onChange -> fileobj', fileobj)
      }
    },
  },
}
</script>

<style lang="scss">
.obit-video-content {
  float: left;
  li {
    float: left;
    width: 148px;
    height: 148px;
    margin-right: 15px;
    position: relative;
    video,
    .showImg {
      width: 100%;
      height: 100%;
      object-fit: fill;
    }
    .el-button {
      position: absolute;
      right: -14px;
      top: -14px;
      color: #fff;
    }
  }
}
.upload-img {
  li {
    height: 100px;
    width: 100px;
  }
}
.file-remove {
  .el-upload-list__item:hover .el-icon-close {
    display: none;
  }
}
.avatar-uploader {
  &.obit-video {
    float: left;
  }
  .el-upload {
    // border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .el-upload:hover {
    border-color: #409eff;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 300px;
    height: 200px;
    line-height: 178px;
    text-align: center;
  }

  .avatar {
    width: 300px;
    height: 200px;
    display: block;
  }
}
</style>